<template>
  <div>
    <div v-if="!isAppleDevice()">
      <van-uploader name="video" id="video-input" accept="video/*" capture="camcorder" :after-read="videoChange1"
        :max-count="3" multiple>
        <van-button icon="plus" type="primary">上传文件</van-button>
      </van-uploader>
    </div>
    <video id="video" controls autoplay loop></video>
    <!-- <div id="video-player" class="video-player" ref="video"></div> -->
    <van-form @submit="onSubmit">

      <van-field v-model="tousuForm.complaintTelephone" name="联系电话" label="联系电话" placeholder="请输入联系电话"
        :rules="[{ validator: mobileOrPhone, message: '' }]" colon />
      <van-button round type="info" style="width: 100%;" native-type="submit">提交</van-button>
    </van-form>
    <div>
      <van-uploader accept="image/*,video/*" :after-read="afterRead" :max-count="3" multiple>
        <van-button icon="plus" type="primary">上传文件</van-button>
      </van-uploader>
    </div>
    <van-button icon="plus" type="primary" @click="scwj">上传文件</van-button>
    <img src="base64" alt="">
    <canvas id="loadingbar"></canvas>
  </div>
</template>

<script>
import Player from 'xgplayer';
import 'xgplayer/dist/index.min.css';
import ScreenShort from "js-web-screen-shot";
export default {
  methods: {
    scwj() {
      new ScreenShort({
        enableWebRtc: true, //是否显示选项框
        level: 10000,  //层级级别
        completeCallback: this.callback,
        closeCallback: this.closeFn,
      })
    },
    onSubmit() {
      this.callback()
    },
    mobileOrPhone(val) {
      console.log(/^1[3456789]\d{9}$|^0\d{2,3}-?\d{7,8}$/.test(val));
      return /^1[3456789]\d{9}$|^0\d{2,3}-?\d{7,8}$/.test(val);
    },
    initPlayer() {
      const config = {
        id: 'video-player',
        url: this.url,
        height: '100px',
        fluid: true,
        playbackRate: [0.5, 0.75, 1, 1.5, 2],
        defaultPlaybackRate: 1,
        playsinline: this.isAppleDevice(), // IOS设备设置，防止被浏览器劫持
        'x5-video-player-type': 'h5', // 微信内置浏览器设置，防止被浏览器劫持
        'x5-video-orientation': 'portraint',
        download: true,
        videoInit: true,
        autoplay: false,
      };
      this.player = new Player(config);
      if (this.player) {
        let that = this
        this.player.on('play', () => {
          console.log(that.player);
          that.player.height = '1000px'
          this.$emit('triggerEvent', true);
        });
        this.player.on('pause', () => {
          console.log(111);
          this.$emit('triggerEvent', false);
        });
        this.player.on('exitFullscreen', () => {
          window.scrollTo(0, 0);
        });
      }
    },
    isAppleDevice() {
      const ua = navigator.userAgent.toLowerCase();
      return /iphone|ipad|phone|Mac/i.test(ua);
    },

    videoChange1(file) {
      console.log(file);
      var url = URL.createObjectURL(file.file);
      document.getElementById("video").src = url;
    },
    afterRead(file) {
      var url = URL.createObjectURL(file.file);
      document.getElementById("video").src = url;
      // var url = URL.createObjectURL(file.file);
      // this.url = url;
      // this.initPlayer()
    },
    /**
     * 根据图片生成画布
     */
    convertImageToCanvas(image) {
      var canvas = document.createElement("canvas");
      canvas.width = image.width;
      canvas.height = image.height;
      canvas.getContext("2d").drawImage(image, 0, 0);
      return canvas;
    },
    /**
     * 生成图片
     * 截图确认按钮回调函数
     */
    base64ToBlob(data) {
      var arr = data.split(','),
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);

      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: "image/png" });
    }
    ,
    callback(base64data) {
      console.log(base64data.base64,this.base64ToBlob(base64data.base64));

      // var image = new Image();
      // image.src = base64data;
      // console.log( image.src);
      // image.onload = () => {
      //   debugger
      //   var canvas = this.convertImageToCanvas(image);
      //   var url = canvas.toDataURL("image/jpeg");
      //   // 在页面展示的数组，次数组是要把截图成功后的图片在页面上展示出来的数组，可以根据自己项目的需求进行添加
      //   this.uploadlist.push({ image: url })
      //   for (var i = 0; i < this.uploadlist.length; i++) {
      //     if (this.uploadlist.length >= 6) {
      //       this.uploadhide = false;
      //     }
      //   }
      //   console.log(this.uploadlist, 'push')

      //   var bytes = window.atob(url.split(",")[1]);  //通过atob将base64进行编码
      //   //处理异常，将ASCII码小于0的转换为大于0,进行二进制转换
      //   var buffer = new ArrayBuffer(bytes.length);
      //   var uint = new Uint8Array(buffer);  //生成一个8位数的数组
      //   for (var j = 0; j < bytes.length; j++) {
      //     uint[j] = bytes.charCodeAt(j);  //根据长度返回相对应的Unicode 编码
      //   }
      //   //Blob对象
      //   var imageFile = new Blob([buffer], { type: "image/jpeg" }); //type为图片的格式

      //   // 给后台返回的数组，我的项目需求是要截图多张上传给后端的，如果只上传一张直接就上传imageFile上一句就行，这个数组可以跟根据自己的需求进行编写
      //   this.imageFilelist.push(imageFile);
      //   if (this.imageFilelist != "") {
      //     this.$message({
      //       type: "success",
      //       message: "截图成功",
      //     });
      //   }
      // };
    },


  },
  data() {
    return {
      uploadlist: [],
      aaa: '',
      mobileType: false,
      url: "",
      player: null,
      tousuForm: {
        complaintName: '',
        idCard: '',
        complaintTelephone: '',
        neighborhoodName: '',
        buildingName: '',
        propertyCompanyId: '',
        houseNumber: '',
        complaintType: '',
        neighborhoodId: '',
        propertyCompany: '',
        complaintFiles: '',
        complaintContent: '',

      }
    }
  },
  mounted() {


  }
}
</script>
<style>
.video-player {
  width: 100px !important;
  height: 100px !important;

}
</style>


